<!-- 企业用户分成信息统计 -->
<template>
  <div class="echarts-main-content">
    <div class="echarts-main" ref="visitChart"></div>
  </div>
</template>

<script type="text/javascript">
import { mapState } from "vuex";
import echarts from "echarts";

export default {
  name: "echarts-main",
  props: {
    echartsOption: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    ...mapState("admin/layout", ["isFullscreen", "menuCollapse"]),
  },
  watch: {
    isFullscreen: function (newV, oldV) {
      this.handleResize();
    },
    menuCollapse: function (newV, oldV) {
      console.log(newV, oldV);
      setTimeout(() => {
        this.handleResize();
      }, 500);
    },
  },
  data() {
    return {
      visitChart: null,
    };
  },
  methods: {
    handleSetVisitChart() {
      this.visitChart = echarts.init(this.$refs.visitChart);
      this.visitChart.setOption(this.$props.echartsOption);
    },
    handleResize() {
      this.visitChart.resize();
    },
    checkedTimer(item) {
      console.log(item, "选中时间");
    },
    checkedSearch(item) {
      console.log(item, "item搜索结果");
    },
  },
  mounted() {
    let that = this
    window.addEventListener("resize", () => {
        console.log(1)
        that.handleResize();
    });
  },
  beforeDestroy() {
    window.onresize = null;
    if (this.visitChart) {
      this.visitChart.dispose();
      this.visitChart = null;
    }
  },
};
</script>

<style lang="less" scoped>
.echarts-main,
.echarts-main-content {
  width: 100%;
  height: 100%;
}
</style>
